import React, { Component } from 'react';
import { WingBlank, WhiteSpace, Button, Flex,Icon,Steps} from 'antd-mobile';
import WXJSAPI from '../WXJSAPI';
import {isiOS, getWechatId, setDocumentTitle} from '../utils';

/**
 * 绑定设备入口界面
 */
const Step = Steps.Step;
class WXbind extends Component {

	constructor(props, context) {
		super(props, context);
		let textList = JSON.parse(localStorage.getItem('text_list'));
		this.state = {
			textList: textList
		};
	}

	componentDidMount() {
		this.wxApi = new WXJSAPI((list) => { }, () => { });
		setDocumentTitle("选择联网方式")
	}

	/**
	 * 微信端的airkiss连接
	 */
	oneStepConfigNetwork = () => {
		this.wxApi.toAirkiss((ret) => {
			if (ret.err_msg === 'configWXDeviceWiFi:ok') {
				// 连接成功
				this.wxApi.stopScan();
				if(isiOS()) {
					window.location.href = window.location.protocol+'//'+window.location.host+'/?func=scanbind&wechat_id='+getWechatId();
				}else {
					this.props.history.push({
						pathname: '/scanbind',
					});
				}
			}
		})
	}

	/**
	 * 声纹配网
	 */
	soundWaveConfigNetwork = () => {
		this.wxApi.stopScan();
		if(isiOS()) {
			window.location.href = window.location.protocol+'//'+window.location.host+'/?func=soundbind&wechat_id='+getWechatId();
		}else {
			this.props.history.push({
				pathname: '/soundbind',
			});
		}
	}

	// 跳转到下一步
	jumpStep() {
		if(isiOS()) {
			window.location.href = window.location.protocol+'//'+window.location.host+'/?func=scanbind&wechat_id='+getWechatId();
		}else {
			this.props.history.push({
				pathname: '/scanbind',
			});
		}
	}

	customIcon = () => (
		<Icon type="check-circle" size='sm' />
	);

	title = (text) => (
		<div style={{fontSize:'13px',color:'#424242'}}>{text}</div>
	);

	render() {
		return (
			<div>
				<WingBlank size="lg">
					<div style={{ marginLeft: 10, marginTop: 26, color: '#616161' }}>配置设备上网前确定已完成以下准备:</div>
					<WhiteSpace />
					<div style={{ marginLeft: 10, marginTop: 10 }}>
						<Steps direction="vertical" >
							{
								this.state.textList && this.state.textList.map((item, key) => {
									return <Step key={key} title={this.title(item)} status="finish" icon={this.customIcon()}/>
								})
							}
						</Steps>
					</div>
				</WingBlank>
				<WhiteSpace size="lg" />
				<WhiteSpace size="lg" />
				<Flex justify="between">
					<Flex.Item>
						<div style={{
							display: "flex",
							alignItems: "center",
							justifyContent: 'center',
							width: '100%',
							height: "42px"
						}}>
							<Button
								type="primary"
								size="large"
								inline
								onClick={this.oneStepConfigNetwork} >
								&nbsp;&nbsp;一键配网&nbsp;&nbsp;
							</Button>
						</div>
					</Flex.Item>
					<Flex.Item>
						<div style={{
							display: "flex",
							alignItems: "center",
							width: '100%',
							justifyContent: 'center',
							height: "42px"
						}}>
							<Button type="primary" size="large" inline onClick={this.soundWaveConfigNetwork}>&nbsp;&nbsp;声纹配网&nbsp;&nbsp;</Button>
						</div>
					</Flex.Item>
				</Flex>

				<div style={{
					display: "flex", alignItems: "start", width: '100%',
					justifyContent: 'center', height: "64px", marginTop: "42px"
				}}>
					<Button 
						type="default"
						style={{ width: '80%' }}
						onClick={this.jumpStep.bind(this)}>设备已联网，跳过此步骤</Button>
				</div>

			</div>
		);
	}
};
export default WXbind;
